<template>
    <div class="addCartBox">
        <!-- <div class="addCartBtn" @click="add">加入购物车</div> -->
        <div class="addSubtWrapper">
            <div class="addSubt" @click.stop="">
                <!-- <span class="operate" v-show="itemQty(productdetail) > 0" @click="decrease(productdetail)">-</span> -->
                <span class="much" v-show="itemQty(productdetail) > 0">{{itemQty(productdetail)}}</span>
                <span class="operate" @click="increase(productdetail)">+</span>
            </div>
        </div>
            <!-- 弹窗 -->
        <productMethods ref="productMethods"/>
        <packageProduct ref="packageProduct"/>
    </div>
</template>
<script>

import productMethods from "@/components/productMethods/productMethods.vue"
import packageProduct from "@/components/packageProduct/packageProduct.vue"
import { mapState } from "vuex";
import cartmixin from "@/components/common/cart-mixin";
export default {
    name: 'MemberItem',
    mixins:[cartmixin],
    components:{
        productMethods,
        packageProduct
    },
    props: {
        productdetail: {
            type: Object,
            default() {
                return {};
            },
        },
        // increaseFn: {
        //     type: Function,
        //     default: () => {},
        // },
        // decreaseFn: {
        //     type: Function,
        //     default: () => {},
        // },
    },
    computed: {
        ...mapState({
            shoppingList: (state) => state.cartModule.shoppingList,
        })
    },
    data () {
        return {
            
        }
    },
    methods:{
        decrease(item) {
            //this.decreasePro({ item });
            this.$store.dispatch('decreasePro',item);
        },
        async increase(item) {
            //if (this.cando() == false) return;
            let { type } = item;
            let defaultParams = {
                item,
                needReq: true,
            };
            if (type == 3) {
                this.openPop("packageProduct", {
                    ...defaultParams,
                    cb: this.packageModalCallBack,
                });
            } else if (type == 5) {
                this.openPop("productMethods", {
                    ...defaultParams,
                    cb: this.methodModalCallBack,
                    popType: 1,
                });
            } else {
                let copyItem = item?.isWeightingSale == true ? { ...item } : item;
                this.$store.dispatch('increasePro',{ item: copyItem });
            }
        },
        /**
         * @description 套餐弹窗回调
         */
        packageModalCallBack(params) {
            let { mapItem } = params;
            this.$store.dispatch('increasePro',{ item: mapItem });
            //this.increasePro({ item: mapItem });
        },
        /**
         * @description 菜品做法弹窗回调
         */
        methodModalCallBack(params) {
            let { mapItem } = params;
            this.$store.dispatch('increasePro',{ item: mapItem });
            //this.increasePro({ item: mapItem });
        },
        // /**
        //  * @description 增加/减少商品
        //  */
        // ...mapMutations(["increasePro", "decreasePro", "setMultipleVisible"]),
        itemQty(productdetail){
            let qty = 0;
            for (let i of this.shoppingList) {
                if (i.productId == productdetail.productId) {
                    qty += i.qty;
                }
            }
            return qty;
        },
        add(){
            console.log(this.productdetail)

        }
    }
}
</script>
<style lang="scss" scoped>
    .addCartBox{
        position: absolute;
        bottom: 0;
        right: 0;
        .addCartBtn{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.75rem;
            width: 5rem;
            height: 1.5rem;
            border-radius: 0.2rem;
            background-color: $mainColor;
        }
        .addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
			.total{ width: 4rem;}
			.addSubt{ width: 4rem; height: calc(1rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; font-size: 0.8rem; overflow: hidden; white-space: nowrap;}
			.operate{ width: 1rem; height: 1rem; line-height: 1rem;  text-align: center; cursor: pointer; color: #feb229; border: 1px solid $mainColor; border-radius: 4px;
				&:last-child{ border: 1px solid $mainColor; background-image: linear-gradient(to right,$mainColor,#ffae44); color: #fff;}
			}
			.much{ width: calc(100% - 2rem - 2px); background-color: transparent; height: 1rem; line-height: 1rem;  text-align: center; outline: none; border: none; border-radius: 0;}
		}
    }
</style>